import React, { PureComponent } from 'react';
import { PullToRefresh, ListView } from 'antd-mobile';
import LoadingFooter from './LoadingFooter';
import ProCard from '@ant-design/pro-card';
import { getFetch } from "@/utils/doFetch";
import { Row, Col, Tabs, Drawer } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import InitForm from '../InitForm'

const { TabPane } = Tabs;

class Mcard extends PureComponent {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            visible: false,
            dataSource,
            isLoading: true,
            scrolltop: 0,
            refreshing: false,
            fields: {},
            searchlist: [],
            dataArr: props.dataSource || [],
            isEmpty: false,
            params: {
                pageIndex: 1,
                ...props.extraparams
            }
        };
    }

    //获取一段分页数据
    getsectiondata(np) {
        let { path, dataSource } = (this.props || np);
        if (!path) {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(dataSource),
                isLoading: false,
                refreshing: false,
            })
            return
        } else {
            getFetch({ url: path, params: this.state.params }).then((res) => {
                if (!res.data) {
                    return;
                }
                let list = res.data.list || res.data.dataList;
                let dataArr = this.state.dataArr.concat(list);
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(dataArr),
                    isLoading: false,
                    refreshing: false,
                    hasMore: res?.data?.hasnextpage,
                    dataArr,
                    isEmpty: this.state.params.pageIndex == 1 && list.length == 0,
                });
            });
        }

    }

    getfields() {
        let fields = {},
            { columns } = this.props,
            searchlist = columns.filter((it) => it.search !== false && it.option != 'option' && it.key);
        searchlist.map((it) => {
            let key = '';
            if (it?.formItemProps?.name) {
                key = it.formItemProps.name;
            } else {
                key = it.key;
            }

            let valuetype = it.valueType ? it.valueType : 'input', picker = "", format = "YYYY-MM-DD";

            if (valuetype == "dateMonth") {
                valuetype = "datepicker";
                picker = "month";
                format = "YYYY-MM"
            }

            if (valuetype == "dateRange") {
                valuetype = "daterange";
                picker = "date";
                format = "YYYY-MM-DD"
            }

            if (valuetype == "date") {
                valuetype = "datepicker";
                picker = "date";
                format = "YYYY-MM-DD"
            }


            fields[key] = {
                value: it.initialValue || this.state.params[key],
                type: valuetype,
                title: it?.title,
                name: [key],
                col: { span: 24 }, //栅格布局 默认 12
                linked: it.linked,
                belinked: it.belinked,
                options: it.options,
                picker: picker,
                format: format
            };
        });
        this.setState({
            fields,
            searchlist
        })
    }

    componentDidMount() {
        this.getsectiondata();
        this.getfields();
        this.props.onRef && this.props.onRef(this);
    }

    componentWillReceiveProps(np) {
        np.onRef && np.onRef(this);
        if (this.props.path != np.path || JSON.stringify(this.props.extraparams) != JSON.stringify(np.extraparams) || JSON.stringify(this.props.dataSource) != JSON.stringify(np.dataSource)) {
            this.lv.scrollTo(0)
            this.setState({
                hasMore: true,
                dataArr: np.dataSource || [],
                params: {
                    pageIndex: 1,
                    ...np.extraparams
                },
            }, () => {
                this.onRefresh(np)
            })
        }
        if (this.props.vs != np.vs) {
            this.onRefresh(np)
        }
        if (this.props.columns != np.columns) {
            this.getfields();
        }
    }



    onRefresh = (np, searchdata) => {
        let extraparams = np ? np.extraparams : this.props.extraparams;
        searchdata = searchdata || {};
        this.setState(
            {
                refreshing: true,
                isLoading: true,
                hasMore: true,
                dataArr: [],
                params: {
                    pageIndex: 1,
                    ...extraparams,
                    ...searchdata
                },
            },
            () => {
                this.getsectiondata(np);
            },
        );
    };

    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
            return;
        }
        let pageIndex = this.state.params.pageIndex + 1;
        this.setState(
            {
                isLoading: true,
                params: {
                    pageIndex,
                },
            },
            () => {
                this.getsectiondata();
            },
        );
    };

    render() {
        let {
            scrolltop,
            dataSource,
            isLoading,
            refreshing,
            hasMore,
            isEmpty,
            visible,
            fields,
            searchlist
        } = this.state, {
            columns,
            cardtitle,
            cardavatar,
            pagetitle,
            pageextra,
            onSearchChange,
            tabBarExtraContent,
            onTabChange,
            tabList
        } = this.props;



        return (
            <div style={{ height: "100%" }}>
                <div className="fixedsearch">
                    {
                        searchlist.length > 0 && <div className='action' onClick={() => {
                            this.setState({
                                visible: true
                            })
                        }}>
                            <SearchOutlined style={{ color: "#fff" }} />
                        </div>
                    }
                    {pageextra}
                </div>

                <Drawer
                    visible={visible}
                    title={"输入您的查询条件"}
                    onClose={() => {
                        this.setState({
                            visible: false
                        })
                    }}
                    closable={true}
                >
                    <InitForm
                        fields={fields}
                        onChange={() => {

                        }}
                        reset={true}
                        submitData={(values) => {
                            this.onRefresh(this.props, values);
                            this.setState({
                                visible: false
                            })
                            onSearchChange(values)

                        }}

                    ></InitForm>
                </Drawer>

                <ListView
                    ref={(el) => (this.lv = el)}
                    dataSource={dataSource}
                    renderHeader={() => {
                        return pagetitle ? <div className="pagetitle">
                            <p style={{ marginBottom: 12 }} className="spacebt">
                                {pagetitle}
                                {!tabList && tabBarExtraContent}
                            </p>
                            <Tabs style={{ width: "100%" }} onChange={onTabChange} tabBarExtraContent={tabBarExtraContent} >
                                {
                                    tabList && tabList.map(it => {
                                        return <TabPane tab={it.tab} key={it.key}></TabPane>
                                    })
                                }
                            </Tabs>
                        </div> : null
                    }}
                    renderFooter={() => (
                        <LoadingFooter
                            isLoading={isLoading && hasMore}
                            isEmpty={isEmpty}
                        ></LoadingFooter>
                    )}
                    renderRow={(rowData) => {
                        let extrarow = columns.filter(it => it.key != cardtitle && it.key != cardavatar && it.option != "option" && it.key);
                        return <ProCard
                            headerBordered
                            style={{ borderRadius: 4, overflow: "hidden" }}
                            title={<div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
                                {
                                    cardavatar && columns.filter(it => it.key == cardavatar)[0].render(null, rowData)
                                }
                                <span style={{ marginLeft: cardavatar ? 12 : 0, color: "#1890ff" }}>{rowData[cardtitle ? cardtitle : columns[0].key]}</span>
                            </div>}
                            extra={extrarow.length > 4 ? <a style={{ fontSize: 12 }}>查看详情</a> : null}
                            actions={columns.filter(it => it.valueType == "option").length == 0 ? null : columns.filter(it => it.valueType == "option")[0].render(null, rowData)}>
                            <Row>
                                {
                                    extrarow.map(it => {
                                        return <Col span={24} key={it.key} style={{ display: "flex", justifyContent: "space-between", margin: "6px 0" }}>
                                            <div style={{ display: "inline-block", flexShrink: 0 }}>{it.title}</div>
                                            <div style={{ color: "#999", flex: 1, overflow: "hidden", textAlign: "right", wordBreak: "break-all" }}>{it.render ? it.render(null, rowData) : rowData[it.key]}</div>
                                        </Col>
                                    })
                                }
                            </Row>
                        </ProCard>
                    }}
                    renderSeparator={(sectionID, rowID) => (
                        <div
                            key={`${sectionID}-${rowID}`}
                            style={{
                                backgroundColor: 'transparent',
                                height: 12,
                            }}
                        />
                    )}
                    style={{
                        overflow: 'auto',
                        height: "100%",
                        minHeight: "calc(100vh - 110px)",
                    }}
                    className={scrolltop > 0 ? 'notrans' : 'trans'}
                    pageSize={10}
                    onScroll={(e) => {
                        this.setState({
                            scrolltop: e.target.scrollTop,
                        });
                        if (e.target.scrollTop > 400) {

                        } else {

                        }
                    }}
                    scrollRenderAheadDistance={800}
                    distanceToRefresh={window.devicePixelRatio * 25}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                    pullToRefresh={
                        <PullToRefresh refreshing={refreshing} onRefresh={this.onRefresh} />
                    }
                />
            </div>

        );
    }
}

export default Mcard
